<div class="layui-fluid" id="VIEW-info" lay-title="个人信息">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">

                <div class="layui-form-item">
                    <label class="layui-form-label">修改密码</label>
                    <div class="layui-input-block" style="width:168px">
                        <input type="password" name="pass" lay-verify="password" autocomplete="off" placeholder="请输入密码" maxlength="20" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block" style="width:168px">
                        <input type="password" id="pass_re" lay-verify="" autocomplete="off" placeholder="请再次输入密码" maxlength="20" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">*姓名</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="text" id="f_name" name="name" lay-verify="required" autocomplete="off" placeholder="请输入姓名" maxlength="15" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <input type="radio" id="f_sex_m" name="sex" value="男" title="男">
                                <input type="radio" id="f_sex_w" name="sex" value="女" title="女">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">*电子邮箱</label>
                    <div class="layui-input-block" style="width:168px">
                        <input type="text" name="email" lay-verify="required|email" autocomplete="off" placeholder="请输入电子邮箱" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">*学院专业</label>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <select name="institute" id="f_institute" lay-verify="required" lay-filter="form-group-institute">
                <option value="">请选择学院</option>
              </select>
                        </div>
                        <div class="layui-inline">
                            <select name="speciality" id="f_speciality" lay-verify="required">
                <option value="">请选择专业</option>
              </select>
                        </div>
                        <div class="layui-inline" id="f_class" style="width:60px">
                            <input type="text" name="class" lay-verify="class" autocomplete="off" placeholder="班级" maxlength="4" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">MAC地址</label>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <i class="layui-icon">&#xe7d8;</i>
                        </div>
                        <div class="layui-inline" style="width:132px">
                            <input type="text" name="phone_mac" lay-verify="mac" autocomplete="off" placeholder="手机MAC地址" maxlength="17" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <i class="layui-icon">&#xe898;</i>
                        </div>
                        <div class="layui-inline" style="width:132px">
                            <input type="text" name="pc_mac" lay-verify="mac" autocomplete="off" placeholder="电脑MAC地址" maxlength="17" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">修改</button>
                        <button type="button" id="f_reset" class="layui-btn layui-btn-primary" lay-filter="form-group-reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'laydate'], function() {
        var $ = layui.$,
            admin = layui.admin,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form;

        var specialities_list = [];

        var info_data;

        admin.get({
            api: 'info',
            success: function(res) {
                info_data = res.data;
                $('#f_institute').append('<option value=' + info_data.institute + '>' + info_data.institute + '</option>');
                $('#f_speciality').append('<option value=' + info_data.speciality + '>' + info_data.speciality + '</option>');
                form.val('form-group', {
                    "name": admin.data()['user'].name,
                    "sex": info_data.sex,
                    "email": info_data.email,
                    "institute": info_data.institute,
                    "speciality": info_data.speciality,
                    "class": info_data.class,
                    "phone_mac": info_data.phone_mac,
                    "pc_mac": info_data.pc_mac,
                })

                if ("undefined" == typeof info_data.class) {
                    $("#f_class").hide();
                }

                admin.get({
                    api: 'specialities',
                    success: function(res) {
                        specialities_list = res.data;
                        $("#f_institute").find("option").remove();
                        $('#f_institute').append("<option value=''>请选择学院</option>");
                        layui.each(res.data, function(index, item) {
                            $('#f_institute').append('<option value=' + item.institute + '>' + item.institute + '</option>');

                            if (info_data.institute == item.institute) {
                                $("#f_speciality").find("option").remove();
                                $('#f_speciality').append("<option value=''>请选择专业</option>");
                                layui.each(item.specialities, function(index, item) {
                                    $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
                                });
                            }
                        });

                        form.val('form-group', {
                            "institute": info_data.institute,
                            "speciality": info_data.speciality,
                        })

                        form.render('select');
                    },
                    complete: function() {
                        //loading.hide();
                    }
                });
            },
            complete: function() {
                //loading.hide();
            }
        });






        form.render(null, 'form-group');

        laydate.render({
            elem: '#form-group-date'
        });

        /* 自定义验证规则 */
        form.verify({
            password: function(value) {
                var pass_re = $('#pass_re').val();
                if (value != pass_re) {
                    return '两次输入的密码不一致';
                }
            },
            class: function(value) {
                if ("undefined" != typeof info_data.class) {
                    if (!/^\d+\d+\d$/.test(value) || value.length != 4) {
                        return '请输入正确的班级号，如：1501';
                    }
                }
            },
            mac: function(value) {
                if (value.length != 0) {
                    if (!/^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/.test(value)) {
                        return '请输入正确的MAC地址，如：00:00:00:00:00:00';
                    }
                }
            },
        });

        /* 监听学院选择 */
        form.on('select(form-group-institute)', function(data) {
            console.log(data);
            $("#f_speciality").find("option").remove();
            $('#f_speciality').append("<option value=''>请选择专业</option>");
            layui.each(specialities_list, function(index, item) {
                if (data.value == item.institute) {
                    layui.each(item.specialities, function(index, item) {
                        $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
                    });
                    return true;
                }
            });
            form.render('select');
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function(data) {
            var post_data = data.field;

            admin.post({
                api: 'info',
                data: post_data,
                success: function(res) {
                    if (res.code == 200) {
                        admin.data({
                            key: 'user',
                            value: {
                                'name': post_data.name
                            }
                        })
                        $('#layout_name').text(post_data.name);
                        layer.msg('操作成功');
                    } else {
                        layer.msg('操作失败');
                    }
                },
            });

            return false;
        });


        /* 监听重置 */
        $('#f_reset')[0].onclick = function() {

            $('#f_sex_m')[0].checked = false;
            $('#f_sex_w')[0].checked = false;
            $("#f_speciality").find("option").remove();
            $('#f_speciality').append("<option value=''>请选择专业</option>");
            layui.each(specialities_list, function(index, item) {
                if (info_data.institute == item.institute) {
                    layui.each(item.specialities, function(index, item) {
                        $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
                    });
                    return true;
                }
            });

            form.val('form-group', {
                "pass": '',
                "name": admin.data()['user'].name,
                "sex": info_data.sex,
                "email": info_data.email,
                "institute": info_data.institute,
                "speciality": info_data.speciality,
                "class": info_data.class,
                "phone_mac": info_data.phone_mac,
                "pc_mac": info_data.pc_mac,
            });
            $('#pass_re').val('');

            form.render('select');
            form.render('radio');
            return false;
        };

    });
</script>